<template>
	<view class="app">   
		<view class="recommend-list box-card" v-if="recommend.list && recommend.list.length > 0">
		 
			<u-waterfall class="recommend-waterfall" v-model="recommend.list" ref="uWaterfall">
				<template v-slot:left="{leftList}">
					<view class="recommend-item recommend-item-left" v-for="(item,index) in leftList" :key="item.id" @click="checkItem(item)">
						<u-lazy-load class="recommend-item-img" threshold="-450" border-radius="10" :image="item.image"  ></u-lazy-load>
						<text class="recommend-item-title text-2-row">{{item.title}}</text>
						<view class="recommend-item-bottom">
							<text class="recommend-item-price">￥<text>{{item.money}}</text></text>
							<text class="recommend-item-old-price">￥{{item.old}}</text>
						</view>
					</view> 
					 
				</template>
				<template v-slot:right="{rightList}">
					 <view class="recommend-item recommend-item-right"  v-for="(item,index) in rightList" :key="item.id" @click="checkItem(item)">
						<u-lazy-load class="recommend-item-img" threshold="-450" border-radius="10" :image="item.image"  ></u-lazy-load>
						<text class="recommend-item-title text-2-row">{{item.title}}</text>
						<view class="recommend-item-bottom">
							<text class="recommend-item-price">￥<text>{{item.money}}</text></text>
							<text class="recommend-item-old-price">￥{{item.old}}</text>
						</view>
					 </view> 
					  
				</template> 
			</u-waterfall>
		</view>
	 
	</view>
</template>
<style scoped> 
	.index-title{ font-weight: bold;margin-bottom: 20rpx;color:#333;} 
	.recommend-list{background-color: unset;box-shadow: unset;padding:20rpx 0rpx}
	.recommend-item{ margin-bottom: 20rpx;background-color: white;border-radius: 10rpx;position: relative;padding: 20rpx;background-color: white;border-radius: 20rpx;}
	.recommend-item-left{margin-right: 10rpx;margin-left:0;}
	.recommend-item-right{margin-left: 10rpx;margin-right:0;}
	.recommend-item-title{ margin-bottom: 20rpx;margin-top:10rpx}
	.recommend-item-price{color:#19be6b;} 
	.recommend-item-price text{font-weight: bold;font-size: 40rpx;}
	.recommend-item-old-price{text-decoration: line-through;margin-left: 20rpx;color:#ccc;font-size: 24rpx;}
	
	.mall-category .index-title{padding:20rpx 0 0 20rpx;}
	.mall-category{margin-top:30rpx;padding:0;}
	.mall-category-list{display: flex;flex-wrap: wrap;}
	.mall-category-item{margin-bottom: 20rpx;;width: 25%;display: inline-flex;align-items: center;justify-content: center;flex-direction: column;}
	.mall-category-item image{width: 100rpx;height: 100rpx;}
	
</style>
<script>
	export default {
		data() {
			return {
				banner:[], 
				category:{},
				recommend:{}
			}
		},
		methods:{
			showToast(txt){
				if(txt == ''){
					return false
				}
				this.$u.toast(txt)
			},  
			bannerClick(e){
				if(this.banner[e]?.url){
					getApp().globalData.tools.gotoPage(this.banner[e]?.url)
				} 
			},
			checkItem(item){
				if(item?.url && item?.url != ''){
					getApp().globalData.tools.gotoPage(item?.url)
					return
				}
				this.showToast(item.toast || '')
			},
			getMallIndexData(){
				this.$u.api.index.getMallIndexData().then(res => {
					this.banner = res.data?.banner || []  
					this.category = res.data?.category || {}
					this.recommend = res.data?.recommend || {}
					
				})
			},
		},
		onShow() {
			this.getMallIndexData()
		},
		onLoad() { 
		}
	}
</script>

